<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小球动画</title>
  </title>
  <script src="./antvx6.js"></script>
  <script src="./dagre.min.js"></script>
  <script src="./layout.min.js"></script>
  <style>
    .pr {
      position: relative;
      left: 42px;
      top: 10px;
      /* 一个底部 */
      transform: scale(1, 0.3);
      /* 一个平面 */
      /* transform: scale(1, 1); */
    }

    .zero {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      animation: myZero 2s ease-out;
      background-color: rgba(255, 0, 0, 0.5);
      animation-iteration-count: infinite;
    }

    .one {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      animation: myOne 2s ease-out;
      background-color: rgba(255, 0, 0, 0.5);
      animation-iteration-count: infinite;
    }

    .two {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      animation: myTwo 2s ease-out;
      background-color: rgba(255, 0, 0, 0.5);
      animation-iteration-count: infinite;
    }

    @keyframes myZero {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      100% {
        transform: scale(5);
        opacity: 0;
      }
    }

    @keyframes myOne {
      0% {
        transform: scale(2);
        opacity: 1;
      }

      100% {
        transform: scale(8);
        opacity: 0;
      }
    }

    @keyframes myTwo {
      0% {
        transform: scale(3);
        opacity: 1;
      }

      100% {
        transform: scale(11);
        opacity: 0;
      }
    }
  </style>
</head>

<body>

  <div style="display: flex;width: 1600px;height:500px;border:1px solid #000;">
    <div id="container" style="flex: 1;width: 1600px; height: 500px;"></div>
  </div>
  <script>
    let graph;
    function clearGraph() {
      graph.dispose();
    }
    window.onload = function () {
      const Graph = X6.Graph;
      const Dom = X6.Dom;


      graph = new Graph({
        container: document.getElementById('container'),
        autoResize: true,
        scroller: {
          enabled: true,// 允许滚动
          pannable: true,// 启用画布平移能力
        },
        interacting: false,
        connecting: {
          router: 'orth',// 连线的方式 ['normal','orth','oneSide','manhattan','metro','er']
        },
      })

      let obj = {
        x: 300,
        y: 300,
        mutualColor: 'red'
      }
      // 生成闪烁底部--圆圈扩散
      const html = '<div class="pr"><div class="zero" style="backgroundColor:' + obj.mutualColor +
        '"></div><div class="one" style="backgroundColor:' + obj.mutualColor +
        '"></div><div class="two" style="backgroundColor:' + obj.mutualColor +
        '"></div></div>'
      graph.addNode({
        x: obj.x,
        y: obj.y,
        id: obj.id,
        width: 100,
        height: 30,
        shape: 'html',
        html() {
          const wrap = document.createElement('div')
          wrap.innerHTML = ` 
            <div class="pr">
              <div class="zero" style="background-color:${obj.mutualColor}"></div>
              <div class="one" style="background-color:${obj.mutualColor}"></div>
              <div class="two" style="background-color:${obj.mutualColor}"></div>
            </div>`
          return wrap
        }
      })


    }
  </script>
</body>

</html>